<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/index.css"/>
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/common.js"></script>
    <script src="${pageContext.request.contextPath}/js/vue.js"></script>
    <script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
    <title>消息中心</title>
    <style>
        .scro{
            overflow-y:scroll;
        }
    </style>
</head>
<body>

<jsp:include page="common/header.jsp"/>

<article>
    <!-- 网站主体 -->
    <div id="main">
        <section class="ct">
            <h1 class="detail-msg">消息中心</h1>

            <div class="bg-hr"></div>

            <ul class="msg-menu">
                <li class="official">
                    <a :class="{active: redirectUrl == 'official'}" :click="official">官方(<b>{{announcementMsgList.length}}</b>)</a>
                    <div class="msg-content">
                        <a class="msg" href="#" v-for="a in announcementMsgList">
                            <span>{{a.type}}{{a.content}}</span>
                            <time>{{getTime(a.create_time)}}</time>
                        </a>
                        <!-- 没有消息的提示 -->
                        <!-- <a class="no-data"><img src="./images/404.svg"/>暂无消息</a> -->
                    </div>
                </li>
                <li class="notify">
                    <a :class="{active: redirectUrl == 'inform'}" :click="inform" >通知(<b>{{notifiMsgList.length}}</b>)</a>
                    <div class="msg-content scro">
                        <a class="msg" href="#" v-for="item in notifiMsgList">
                            <span>{{item.remark}}{{item.content}}</span>
                            <time>{{getTime(item.createTime)}}</time>
                        </a>

                    </div>
                </li>
                <li class="letter">
                    <a href="javascript:void(0)" :class="{active: redirectUrl == 'letter'}" @click="msglist" >私信(<b>{{unreadcount}}</b>)</a>
                    <div class="msg-content chatx">
                        <iframe :src="'${pageContext.request.contextPath}/msg/chat?r='+time" id="chat" name="chat"></iframe>
                    </div>
                </li>
                <li class="blist">
                    <a :class="{active: redirectUrl == 'black'}" @click="myBlack" >黑名单</a>
                    <div class="msg-content">
                        <a class="msg">以下用户已添加至黑名单，你将不再收到对方的消息</a>
                        <a class="msg" v-for="v in myBlacks">
                            <span><img :src="'${pageContext.request.contextPath}/msg/photo?p='+v.photo"/>{{v.nick_name}}</span>
                            <button class="btn" @click="removeblack(v.user_id_black)">解除</button>
                        </a>

                    </div>
                </li>
            </ul>
        </section>
    </div>
</article>
<jsp:include page="common/footer.jsp"/>
<script>

    new Vue({
        el:"#main",
        data:{
            redirectUrl:'${param.f}',
            notifiMsgList:[],
            userlist:[],
            myBlacks:[],
            unreadcount:0,
            resrc:'',
            time:7,
            announcementMsgList:[]

        },
        created(){
            this.notifiMessage();
            this.announcementMsg();
            this.getTime();
            this.msglist();
            this.unread();
        },
        methods:{
            /*时间格式化*/
            getTime(timestamp){
                let date = new Date(timestamp);
                return date.format("yyyy-MM-dd HH:mm:ss");
            },
            /*加载官方通知消息*/
            announcementMsg(){
                fetch("${pageContext.request.contextPath}/msg/announcement").then(ret =>{
                    this.announcementMsgList = ret.data;
                })
            },
            /*加载通知消息*/
            notifiMessage(){
                fetch("${pageContext.request.contextPath}/msg/notifi").then(ret =>{
                    if(ret.status){
                        this.notifiMsgList = ret.data;
                    }
                })
            },
            myBlack(){
                fetch("${pageContext.request.contextPath}/msg/myBlack").then(ret=>{
                    if(ret.status){
                        this.myBlacks = ret.data.list;
                    }

                })
            },
            msglist(){
                this.time=new Date().getTime();
                fetch("${pageContext.request.contextPath}/msg/msglist?umsgId=${param.umsgid}").then(ret=>{
                    if(ret.status){
                        this.userlist = ret.data.list;
                    }
                })
            },
            removeblack(event){
                fetch("${pageContext.request.contextPath}/msg/removeBlack?reb="+event).then(ret=>{
                    if(ret.status){
                        this.myBlacks = ret.data.list;
                        this.myBlack();
                    }

                })

            },
            //未读消息数
            unread(){
                fetch("${pageContext.request.contextPath}/msg/unRead").then(ret=>{
                    if(ret.status){
                        this.unreadcount = ret.data;
                    }
                })
            }

        },
        // updated(){
        //     this.myBlack();
        // }
    })
    $(function(){

        $(".msg-menu li > a").on("click", function(event){
            $(this).addClass("active").parent().siblings().children("a").removeClass("active");
        })

        $(".msg-content .apply").on("click", function(event){
            $(this).next("input").show().parent().siblings().find("input").hide();
        })
    })


</script>
</body>

</html>
